<template>
  <basic-container>
    <header>
      <el-row>
        <el-col :span="10" align="start">项目一览</el-col>
        <el-col :span="14" align="end">
          <el-button type="primary">批量导出项目</el-button>
        </el-col>
      </el-row>
    </header>
    <div class="container">
      <div class="content-header">
        <div class="content-top">
          <el-row>
            <el-col :span="10" align="start">
              <div class="select">
                <div>
                  <el-select v-model="value" placeholder="全部年度">
                    <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="project-select">
                  <el-select v-model="value" placeholder="全部项目状态">
                    <el-option
                      v-for="item in projectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </el-col>
            <el-col :span="14" align="end">
              <el-input v-model="input3" placeholder="请输入搜索项目名称或被审计单位名称" class="input-with-select">
                <template #append>
                  <el-button :icon="Search" />
                </template>
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div class="content-body">
          <div class="body-top">
            <div class="top-left">相关项目共计 12 项</div>
            <div class="top-right">
              <el-radio-group @change="onRadio" v-model="radio" size="small" fill="#D9DCE4" text-color="#25292C">
                <el-radio-button label="card">
                  <div class="body-btn">
                    <div class="btn-icon">
                      <img src="@/assets/images/project-view/application.png" />
                    </div>
                    <div class="btn-word">卡片展示</div>
                  </div>
                </el-radio-button>
                <el-radio-button label="list">
                  <div class="body-btn">
                    <div class="btn-icon">
                      <img src="@/assets/images/project-view/marshalling.png" />
                    </div>
                    <div class="btn-word">列表展示</div>
                  </div>
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="body-content">
            <projectCardVue v-if="bodyFlag" :projectCardList="projectCardList"></projectCardVue>
            <projectListVue v-else></projectListVue>
          </div>
        </div>
      </div>
    </div>
  </basic-container>
</template>
<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import projectCardVue from './components/project-card.vue';
import projectListVue from './components/project-list.vue';
const value = ref('');
const bodyFlag = ref(true);
const radio = ref('card');
const yearOptions = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]);
const projectOptions = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]);
const projectCardList = ref([
  {
    flag: true,
    title: '审前准备',
    tag: '审前实施方案',
    warnFlag: false,
    subtitle: '重要信息系统专项审计',
    progress: 30,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '现场实施',
    tag: '审前实施方案',
    warnFlag: false,
    subtitle: '网络完全专项审计',
    progress: 50,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '审前准备',
    tag: '审前实施方案',
    warnFlag: false,
    subtitle: '西部项目原党委书记、执行董事张三经济责任审计',
    progress: 50,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '项目结项',
    tag: '审前实施方案',
    warnFlag: false,
    subtitle: '2022年度业务招待费审计',
    progress: 50,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '现场实施',
    tag: '审前实施方案',
    warnFlag: false,
    subtitle: '青岛公司总经理张涵离任审计',
    progress: 70,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '审计报告',
    tag: '审计报告征求意见稿',
    warnFlag: false,
    subtitle: '数据治理专项审计',
    progress: 50,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '项目归档',
    tag: '审计工作底稿',
    warnFlag: false,
    subtitle: '青岛公司副经理张海离任审计',
    progress: 80,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '审计报告',
    tag: '审计报告征求意见稿',
    warnFlag: true,
    subtitle: '数据治理专项审计',
    progress: 40,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
  {
    flag: false,
    title: '审计报告',
    tag: '审计报告征求意见稿',
    warnFlag: true,
    subtitle: '西部项目原党委书记、执行董事张三经济责任审计',
    progress: 60,
    compony: '至臻云总部',
    time: '2023/01/01-2023/12/31',
    cardFlag: true,
    enterFlag: true,
    configurationFlag: true,
    personnelFlag: true,
  },
]);
const onRadio = () => {
  if (radio.value === 'list') {
    bodyFlag.value = false;
  } else {
    bodyFlag.value = true;
  }
};
</script>
<style lang="scss" scoped>
.box-card {
  width: 100px;
  height: 100px;
  background: #25292c;
}
header {
  .el-col-10 {
    background-color: #f0f2f5;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #25292c;
    line-height: 42px;
    height: 50px;
  }
  .el-col-14 {
    background-color: #f0f2f5;
    height: 50px;
    padding-right: 20px;
  }
}
::v-deep .el-table th.el-table__cell {
  background: #f6f8fa !important;
  font-size: 14px;
  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
  font-weight: 500;
  color: #25292c;
  line-height: 20px;
  height: 50px;
}
.container {
  height: calc(100vh - 208px);
  .content-header {
    width: 1678px;
    height: 80px;
    background: #f0f2f5;
    border-radius: 2px;
    .content-top {
      width: 1678px;
      height: 64px;
      background: #ffffff;
      border-radius: 2px;
    }
  }
}
.select {
  display: flex;
  margin: 10px 0 0 10px;
  .project-select {
    margin-left: 10px;
  }
}
.input-with-select {
  width: 370px;
  margin: 10px 10px 0 0;
}
.content-body {
  width: 100%;
  height: 780px;
  margin-top: 16px;
  .body-top {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    .top-left {
      color: #989da3;
      font-size: 14px;
      padding: 20px 0 21px 24px;
    }
    .top-right {
      padding: 16px 24px 17px 0;
    }
  }
}
.body-btn {
  display: flex;
  .btn-icon {
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }
}
.body-content {
  width: 100%;
  height: 100%;
  padding: 0 24px 24px 24px;
  box-sizing: border-box;
}
</style>
